{% extends 'base.html' %}
{% load static %}
{% block title %}
    程序设计
{% endblock %}

{% block mycss %}
    {{ block.super }}
    <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/learn.css' }}"  rel="stylesheet">

{% endblock %}
<style>
    #readmore1{
        width: 100px;
        height: 40px;
        background: red;
    }
</style>

{% block content %}
    <script>
        $.ajaxSetup({cache: false});
        goto_category("{{ second_category }}", 1)
        function goto_category(category, page_id) {
            $.ajax({
                type: 'POST',
                data: {'page_id': page_id, 'category': category, csrfmiddlewaretoken: '{{ csrf_token }}'},
                url: '{% url 'articles:program:home' %}',
                datatype:JSON,
                success:function (data) {
                    f1(data);
                },
                error:function () {
                    console.log('ajax刷新分页数据失败！');
                }
            });
            $("#page-index*").click(function () {
                let idx = $(this).text();
                idx = parseInt(idx);
                goto_category(category, idx);
            });

            function f1(data) {
                $('.cbp_tmtimeline li').remove();

                for (var i = 0; i < data.articles.length; i++) {
                    var year = data.articles[i].date.substring(0, 4);
                    var day = data.articles[i].date.substring(5, 10);
                    var url = "/articles/program/detail/" + data.articles[i].article_id + '.html';

                    var description = data.articles[i].description
					if (description.length > 120) {
						description = description.substring(0, 120) + "......";
					}
                    $('.cbp_tmtimeline').append('' +
                        '<li>' +
                            '<time class="cbp_tmtime">'+
                                '<span>' + year + '</span>' +
                                '<span>' + day + '</span>'+
                            '</time>'+
                            '<div class="cbp_tmicon"></div>' +
                            '<div class="cbp_tmlabel" data-scroll-reveal="enter right over 1s">' +
                                '<h2>'+ data.articles[i].title +'</h2>' +
                                '<p>'+
                                    '<span class="blogpic">'+
                                        '<img id="image-' + i + '" style="width: 100%; height: 100%" src="/static/images/loading.gif">' +
                                    '</span>' +
                                    '<a href="/articles/program/detail/' + data.articles[i].article_id + '.html">'+
                                        description +
                                    '</a>' +
                                '</p>' +
                                '<a href="' + url + '" class="readmore" target="_blank">阅读全文&gt;&gt;</a>' +
                            '</div>' +
                        '</li>'
                    );
                }

                //刷新页码
                $('.pages a:not(":first,:last")').remove();
                $("#total-pages").text("共" + data.total_pages + "页")

                let idx = parseInt(data.page_id);

                if (parseInt(data.total_pages) <= 1) {
                    $('.pages a:first').hide()
                    $('.pages a:last').hide()
                }
                else {
                    $('.pages a:first').show()
                    $('.pages a:last').show()

                    var page_size = parseInt(data.page_size);

                    if (parseInt(data.total_pages) <= page_size) {     //如果总页码数小于等于5，则全部显示
                        for (var i = 1; i <= parseInt(data.total_pages); i++) {
                            $('.pages a:last').before('<a title="第' + i + '页" id="page-index"><b>' + i + '</b></a>');
                        }
                    } else { // 页面数大于5，看当前页面情况
                        if (idx < 5 - 2) {
                            for (var i = 1; i <= page_size; i++) {
                                $('.pages a:last').before('<a title="第' + i + '页" id="page-index"><b>' + i + '</b></a>');
                            }
                        } else if (idx > parseInt(data.total_pages) - 2) {
                            //alert(0);
                            for (var i = parseInt(data.total_pages) - page_size + 1; i <= parseInt(data.total_pages); i++) {
                                $('.pages a:last').before('<a title="第' + i + '页" id="page-index"><b>' + i + '</b></a>');
                            }
                        } else {
                            for (var i = idx - 2; i <= idx + 2; i++) {
                                $('.pages a:last').before('<a title="第' + i + '页" id="page-index"><b>' + i + '</b></a>');
                            }
                        }
                    }
                }

                $('.pages a:not(":first,:last")').each(function () {    //为当前页加上active
                    if (parseInt($(this).text()) === idx)
                        $(this).addClass('active');
                }).click(function () {
                    goto_category(category, $(this).text());
                });

                $('.pages a:first').unbind("click").click(function () {
                    $('.pages a:not(":first,:last")').each(function () {
                        if ($(this).attr("class") === "active") {
                            let idx = parseInt($(this).text());
                            if (idx < 2) {
                                alert("已经是第一页了");
                            }
                            else {
                                goto_category(category, idx-1);
                            }
                        }
                    });
                });

                $('.pages a:last').unbind("click").click(function () {
                    //alert(data.total_pages);
                    $('.pages a:not(":first,:last")').each(function () {
                        let idx = parseInt($(this).text());
                        if ($(this).attr("class") === "active") {
                            if (idx >= parseInt(data.total_pages)){
                                alert("已经是最后一页了");
                            }
                            else {
                                goto_category(category, idx + 1);
                            }
                        }
                    });
                });
                scrollReveal.init();    //使用js动态写入的html,必须init初始化才能正常使用scrollReveal动画效果

                for (var i = 0; i < data.articles.length; i++) {
                    set_image(data.articles[i].title, "image-" + i);
                }
            }
        }
    </script>

    <style>
        #category-btn{
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            -o-user-select: none; /* Opera*/
            user-select: none;
        }
    </style>
    <article>
        <aside>
        <div class="my-container">
            <h2 class="ctitle"><b>程序设计</b>
            </h2>
            <div class="rnav">
                <ul style="margin-left: 0px">
                    {% for cat in categories %}
                        <li>
                            {% comment %}<a id="category-btn" onclick="goto_category('{{ cat }}', 1);">{{ cat }}</a>{% endcomment %}
                            <a id="category-btn" href="/articles/program?category={{ cat.cat }}&page_id=1">{{ cat.name }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>

            <ul class="cbp_tmtimeline">
{% comment %}                {% for article in context.articles %}
                    <li>
                        <time class="cbp_tmtime">
                            <span>{{ article.date |slice:"4" }}</span>
                            <span>{{ article.date |slice:"5:10" }}</span>
                        </time>

                        <div class="cbp_tmlabel" data-scroll-reveal="enter right over 1s">
                            <h2>{{ article.title }}</h2>
                            <div>
                            <p>
                                <span class="blogpic">
                                    <img src="{{ MEDIA_URL }}{{ article.image }}">
                                </span>
                                <a href="{% url 'article:article_detail' %}?title={{ article.title }}">
                                    {{ article.description }}
                                </a>
                            </p>
                                </div>
                            <div id="readmore1">
                                <a href="{% url 'article:article_detail' %}?title={{ article.title }}" target="_blank" class="readmore">阅读全文>></a>
                            </div>
                        </div>
                    </li>
                {% endfor %}{% endcomment %}

            </ul>
            <div class="pages">
                <a title="前一页"><b> < </b> </a>
                <a title="后一页"><b> > </b> </a>
                <label id="total-pages"></label>
            </div>
        </div>
        </aside>
    </article>
{% endblock %}




